<template>
	<div class="layuimini-container">
	    <div class="layuimini-main" id="tet">
	        <div class="layui-btn-group">
	            <button class="layui-btn" id="btn-expand">全部展开</button>
	            <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
	        </div>
	        <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
	        
	       
	    </div>
	</div>
</template>
 <script type="text/html" id="currentTableBar">
	            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
	            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
	        </script>
<script>
	import api from '@/api/system/menu.js'
	import Cookies from 'js-cookie'
	export default {
		mounted() {
			layui.use(['table','treetable'], function () {
			    var $ = layui.jquery;
			    var table = layui.table;
			    var treetable = layui.treetable;
			    // 渲染表格
			    layer.load(2);
				
				api.MenuRouters().then(res=>{	
					treetable.render({
					    treeColIndex: 1,
					    treeSpid: 0,
					    treeIdName: 'authorityId',
					    treePidName: 'pid',
					    elem: '#munu-table',
					    data: res.list,
					    page: false,
					    cols: [[
					        {type: 'numbers'},
					        {field: 'title', minWidth: 100, title: '权限名称'},
							{field: 'component', minWidth: 100, title: '组件'},
					        {field: 'permission', title: '权限标识'},
					        {field: 'path', title: '菜单url'},
					        {field: 'sort', width: 80, align: 'center', title: '排序号'},
					        {
					            field: 'type', width: 80, align: 'center', templet: function (d) {
					                if (d.type == -1) {
					                    return '<span class="layui-badge layui-bg-gray">菜单</span>';
					                }
					                if (d.type == 0) {
					                    return '<span class="layui-badge layui-bg-blue">页面</span>';
					                } else {
					                    return '<span class="layui-badge-rim">按钮</span>';
					                }
					            }, title: '类型'
					        },
					        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
					    ]],
					    done: function () {
					        layer.closeAll('loading');
					    }
					});
				})
			    $('#btn-expand').click(function () {
			        treetable.expandAll('#munu-table');
			    });
			
			    $('#btn-fold').click(function () {
			        treetable.foldAll('#munu-table');
			    });
			
			    //监听工具条
			    table.on('tool(munu-table)', function (obj) {
			        var data = obj.data;
			        var layEvent = obj.event;
			
			        if (layEvent === 'del') {
			            var  index = layer.open({
			                type: 1,
			                content: "str" //注意，如果str是object，那么需要字符拼接。
			              });
						  $(window).on("resize", function () {
						      layer.full(index);
						  });
			        } else if (layEvent === 'edit') {
			            var index = layer.open({
			                title: '添加用户',
			                type: 2,
			                shade: 0.2,
			                maxmin:true,
			                shadeClose: true,
			                area: ['50%', '50%'],
			                content: '/admin/home',
			            });
			            $(window).on("resize", function () {
			                layer.full(index);
			            });
			        }
			    });
			});
		}
	}
</script>

<style>
</style>
